<template>
  <div class="statistics">
    <div class="dashboard-header">
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="handleDateChange">
      </el-date-picker>
    </div>

    <el-row :gutter="20" class="data-overview">
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="data-item">
            <div class="data-title">总销售额</div>
            <div class="data-value">¥{{ overview.totalAmount }}</div>
            <div class="data-compare">
              较上期
              <span :class="overview.amountGrowth >= 0 ? 'up' : 'down'">
                {{ Math.abs(overview.amountGrowth) }}%
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="data-item">
            <div class="data-title">订单数</div>
            <div class="data-value">{{ overview.orderCount }}</div>
            <div class="data-compare">
              较上期
              <span :class="overview.orderGrowth >= 0 ? 'up' : 'down'">
                {{ Math.abs(overview.orderGrowth) }}%
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="data-item">
            <div class="data-title">客户数</div>
            <div class="data-value">{{ overview.customerCount }}</div>
            <div class="data-compare">
              较上期
              <span :class="overview.customerGrowth >= 0 ? 'up' : 'down'">
                {{ Math.abs(overview.customerGrowth) }}%
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="data-item">
            <div class="data-title">平均客单价</div>
            <div class="data-value">¥{{ overview.averageAmount }}</div>
            <div class="data-compare">
              较上期
              <span :class="overview.averageGrowth >= 0 ? 'up' : 'down'">
                {{ Math.abs(overview.averageGrowth) }}%
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="charts-container">
      <el-col :span="12">
        <el-card shadow="hover">
          <div slot="header">销售趋势</div>
          <div ref="salesChart" style="height: 300px"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <div slot="header">品类占比</div>
          <div ref="categoryChart" style="height: 300px"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-card shadow="hover" class="hot-products">
      <div slot="header">
        <span>热销商品TOP10</span>
      </div>
      <el-table :data="hotProducts" border style="width: 100%">
        <el-table-column prop="rank" label="排名" width="80"></el-table-column>
        <el-table-column prop="name" label="商品名称"></el-table-column>
        <el-table-column prop="categoryName" label="分类"></el-table-column>
        <el-table-column prop="saleCount" label="销量"></el-table-column>
        <el-table-column prop="amount" label="销售额"></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getStatisticsOverview, getSalesTrend, getCategoryRatio, getHotProducts } from '@/api/statistics'

export default {
  name: 'Statistics',
  data() {
    return {
      dateRange: [],
      overview: {
        totalAmount: 0,
        orderCount: 0,
        customerCount: 0,
        averageAmount: 0,
        amountGrowth: 0,
        orderGrowth: 0,
        customerGrowth: 0,
        averageGrowth: 0
      },
      hotProducts: [],
      salesChart: null,
      categoryChart: null
    }
  },
  mounted() {
    this.initCharts()
    this.getOverviewData()
    this.getChartsData()
    this.getHotProductsData()
  },
  methods: {
    initCharts() {
      this.salesChart = echarts.init(this.$refs.salesChart)
      this.categoryChart = echarts.init(this.$refs.categoryChart)
    },
    async getOverviewData() {
      try {
        const { data } = await getStatisticsOverview({
          startDate: this.dateRange[0],
          endDate: this.dateRange[1]
        })
        this.overview = data
      } catch (error) {
        this.$message.error('获取概览数据失败')
      }
    },
    async getChartsData() {
      try {
        const [salesRes, categoryRes] = await Promise.all([
          getSalesTrend({
            startDate: this.dateRange[0],
            endDate: this.dateRange[1]
          }),
          getCategoryRatio()
        ])
        
        this.renderSalesChart(salesRes.data)
        this.renderCategoryChart(categoryRes.data)
      } catch (error) {
        this.$message.error('获取图表数据失败')
      }
    },
    async getHotProductsData() {
      try {
        const { data } = await getHotProducts({
          startDate: this.dateRange[0],
          endDate: this.dateRange[1]
        })
        this.hotProducts = data
      } catch (error) {
        this.$message.error('获取热销商品数据失败')
      }
    },
    renderSalesChart(data) {
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: data.dates
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: data.amounts,
          type: 'line',
          smooth: true
        }]
      }
      this.salesChart.setOption(option)
    },
    renderCategoryChart(data) {
      const option = {
        tooltip: {
          trigger: 'item'
        },
        series: [{
          type: 'pie',
          radius: '50%',
          data: data.map(item => ({
            name: item.name,
            value: item.value
          }))
        }]
      }
      this.categoryChart.setOption(option)
    },
    handleDateChange() {
      this.getOverviewData()
      this.getChartsData()
      this.getHotProductsData()
    }
  },
  beforeDestroy() {
    if (this.salesChart) {
      this.salesChart.dispose()
    }
    if (this.categoryChart) {
      this.categoryChart.dispose()
    }
  }
}
</script>

<style scoped>
.statistics {
  padding: 20px;
}
.dashboard-header {
  margin-bottom: 20px;
}
.data-overview {
  margin-bottom: 20px;
}
.data-item {
  text-align: center;
}
.data-title {
  font-size: 14px;
  color: #666;
}
.data-value {
  font-size: 24px;
  font-weight: bold;
  margin: 10px 0;
}
.data-compare {
  font-size: 12px;
  color: #999;
}
.data-compare .up {
  color: #67C23A;
}
.data-compare .down {
  color: #F56C6C;
}
.charts-container {
  margin-bottom: 20px;
}
.hot-products {
  margin-bottom: 20px;
}
</style> 